<!--
 * @Author: your name
 * @Date: 2020-09-15 19:15:44
 * @LastEditTime: 2021-04-21 17:19:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \inventory-apie:\hjimi\人脸\html\face-recognition\src\views\home\index.vue
-->
<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/img/home.jpg") top center no-repeat;
  background-size: cover;
  .list {
    display: flex;
    justify-content: space-between;
    padding-top: 400px;
    width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    li {
      width: 330px;
      height: 163px;
      border-radius: 24px;
      overflow: hidden;
      transition: all 0.4s;
      cursor: pointer;
      margin-bottom: 40px;
      a {
        color: #fff;
        font-size: 26px;
        padding: 30px;
        display: block;
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover {
        transform: translate(0, -4px);
      }
    }
    li:first-child {
      background: url("../../assets/img/home1.png") top center no-repeat;
    }
    li:nth-child(2) {
      background: url("../../assets/img/home2.png") top center no-repeat;
    }
    li:nth-child(3) {
      background: url("../../assets/img/home3.png") top center no-repeat;
    }
    li:nth-child(4) {
      background: url("../../assets/img/home4.png") top center no-repeat;
    }
    li:nth-child(5) {
      background: url("../../assets/img/home5.png") top center no-repeat;
    }
    li:nth-child(6) {  background: url("../../assets/img/home6.png") top center no-repeat;}
  }
}
body {
  overflow-x: hidden;
  overflow-y: hidden;
}

@media screen  and (min-device-width:1400px) and (max-device-width:1600px){ 
#list {
  padding-top: 320px;
}
}
@media screen  and (min-device-width:1360px) and (max-device-width:1366px){ 
#list {
  padding-top: 240px;
  transform: scale(.9);
}
}
/deep/.copyright {
  padding-top: 85px;
}
</style>
<template>
  <div class="home" ref="Home" id="Home">
    <ul class="list" id="list">
      <li v-for="(homeNav,index) of asyncRoutes_list" :key="index">
        <router-link :to="{path: homeNav.path}">{{ homeNav.meta.title }}</router-link>
      </li>
    </ul>
       <p class="copyright">CopyRight © 2016-2021 华捷艾米 版权所有 京ICP备18040828号-1</p>
  </div>
</template>
<script>
import { asyncRoutes_list } from "../../router"
export default {
  name: "home",
  data() {
    return {
      asyncRoutes_list,
    }
  }
}
</script>
